<template>
    <div class="subpage mysetting">
        <My-head title="我的资料" :carthave="true"></My-head>

        <ul>
            <li>
                <p>头像</p>
                <p>
                    <img src="http://static.welan.com//upload/mall/user/userPhoto/2015-5-5/e82b7c077a7b75851db5954e4cf79134.jpg" alt="" />
                </p>
            </li>
            <li>
                <p>昵称</p>
                <p class="setting-right"> {{ users.username }} </p>
            </li>
            <li>
                <p>手机</p>
                <p class="setting-right">{{ users.phone }}</p>
            </li>
            <li>
                <p>性别</p>
                <p class="setting-right">男</p>
            </li>
            <li>
                <p>生日</p>
                <p class="setting-right">2121-12-29</p>
            </li>
        </ul>

        <van-cell-group>
              <van-cell title="修改密码" :to="{ name:'changepassword' }" value="" icon="shield-o" is-link />
        </van-cell-group>

        <van-button class="logout"  @click='logoutAction' block>退出登录</van-button>

    </div>
</template>


<script>
export default {
    data(){
        return {
            users: {}
        }
    },
    methods: {
        logoutAction() {
            this.$dialog.confirm({
                title: '温馨提示',
                message: '亲,您确定要退出登录吗?',
            })
            .then(() => {
                // on confirm
                this.changeUserInfo(null)
                this.$router.push({ name: 'mine' })
            })
            .catch(() => {
                // on cancel
            })
        },
       getUserInformation() {
            this.$ajax.findUser({
                phone: this.userInfo.phone,
                username: this.userInfo.username
            })
            .then(res=>{
                
                this.users = res[0]
            })
        }
    },
    mounted(){
        this.getUserInformation()
    },
}
</script>




<style lang="scss">

.mysetting {
    background-color: rgb(248, 246, 246);
        ul {
        width: 100%;
        padding-top: 12px;
        display: flex;
        flex-wrap: wrap;
        li {
            width: 100%;
            font-size: 3.733vw;
            padding: 2.667vw 15px;
            display: flex;
            justify-content: space-between;
            line-height: 6.4vw;
            background-color: white;
            .setting-right {
                color: #969799;
            }
            img {
                width: 37px;
                height: 37px;
                border-radius: 50%;
            }
        }
    }
    .logout {
        position: fixed;
        bottom: 20px;
    }
}

</style>